<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- -->
    <!--card区域 -->
    <el-card>
        <el-row class="btn">
            <el-col><el-button type="primary">添加分类</el-button></el-col>
        </el-row>
        <el-table :data="cataData" style="width: 100%" border stripe>
            <el-table-column type='index' label="#" width="80"></el-table-column>
            <el-table-column prop="cat_name" label="分类名称" width="180"></el-table-column>
            <el-table-column prop="cat_deleted" label="是否有效" width="180"></el-table-column>
            <el-table-column prop="cat_level" label="排序" width="180"><el-tag>一级</el-tag></el-table-column>
            <el-table-column  label="操作" width="180">
                <el-button type="primary" size='small' icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" size='small' icon="el-icon-delete">删除</el-button>
            </el-table-column>
        </el-table>
    </el-card>

    <!--分页区域 -->
    <el-pagination
      @size-change="goodsSizeChange"
      @current-change="goodsCurrentChange"
      :current-page="query.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
    import {requestGoodsCate} from '@/network/goods.js'
    export default {
        data() {
            return {
                //发送网络请求时所需的参数
                query:{
                    type:3,
                    pagenum: 1,
                    pagesize: 5
                },
                cataData: [],
                total:0
            }
        },
        created() {
            //获取数据
            this.getGoodsData()
        },
        methods: {
            //发送网络请求，获取数据
            async getGoodsData(){
                const {data} = await requestGoodsCate({params:this.query})
                if(data.meta.status !== 200) return this.$message.error('获取分类数据失败')
                this.cataData = data.data.result
                this.total = data.data.total
                console.log(data);
            },
            //页码大小发生变化时触发的函数
            goodsSizeChange(value){
                this.query.pagesize = value
                this.getGoodsData()
            },
            //点击页码时触发的函数
            goodsCurrentChange(value){
                this.query.pagenum = value
                this.getGoodsData()
            }
        },
    }
</script>

<style lang="less" scoped>
    .btn{
        margin-bottom: 10px;
    }
    .el-pagination{
        margin-top: 30px;
    }

</style>



